<script setup lang="ts">
import { onMounted, onBeforeUnmount } from 'vue';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet.heat';
import hotMap from './hotMap';
import { mapOptions, attribution } from '@/constants/map';

// leaflet 地图实例
let map: L.Map | null = null;
// 热力图

// 创建地图
const createMap = () => {
	// 创建地图实例
	map = L.map('leafletMap', mapOptions);
	// 加载图层
	L.tileLayer(import.meta.env.VITE_GAODE_MAP, {
		// 如果设置此项为true，则切片不会用重复填充来表示世界范围（经度-180到180之间）之外的地方
		noWrap: true,
		// 左下角版权信息
		attribution,
	}).addTo(map);
	// 热力图
	(L as any)
		.heatLayer(hotMap, {
			// 默认情况下，每个热力图的半径
			radius: 40,
			// 默认情况下模糊量
			blur: 20,
			// 热量开始时的最小不透明度
			minOpacity: 1,
			// 设置热力点是否平滑过渡
			scaleRadius: true,
			// 热力图数据对应的纬度字段
			latField: 'lat',
			// 热力图数据对应的经度字段
			lngField: 'lng',
			// 热力图数据的值的字段
			valueField: 'count',
			// 颜色渐变配置
			gradient: {
				0.4: 'blue',
				0.65: 'lime',
				1: 'red',
			},
		})
		.addTo(map);
};

// 初始化地图
const initMap = () => {
	createMap();
};
// 创建地图
onMounted(() => {
	initMap();
});
// 销毁地图
onBeforeUnmount(() => {
	map?.remove();
	map = null;
});
</script>

<template>
	<div class="map-view">
		<div id="leafletMap" class="map"></div>
	</div>
</template>

<style lang="less" scoped>
@import url('./index.less');
</style>
